<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-12 14:03:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:32:27
-->
<template>
  <div class="app-container">
    <div class="chioose-header">
      <div class="chioose-header-left">
        <div class="tab-title active1">服务商</div>
      </div>
    </div>
    <div class="fw-table">
      <div class="relation">
        <el-button type="primary" size="default" @click="relation">
          关联服务商
        </el-button>
      </div>
      <el-table :data="Data" :height="tableHight">
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column label="服务商名称" prop="deptName"> </el-table-column>
        <el-table-column label="服务商ID" prop="serialNumber">
        </el-table-column>
        <el-table-column label="联系方式" prop="phone"> </el-table-column>
        <el-table-column label="关联时间" prop="createTime"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span @click="Unlock(scope.row)" class="unlock">解绑</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes,prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <!-- 关联服务商 -->
    <el-dialog
      title="关联服务商"
      :visible.sync="relationShow"
      width="30%"
      @close="relationClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="fwForm"
        ref="fwForm"
        :rules="fwRules"
        label-position="top"
        :inline="false"
        size="normal"
        v-if="relationShow"
      >
        <el-form-item label="服务商ID" style="margin-left: 25px" prop="fwId">
          <el-input
            v-model="fwForm.fwId"
            style="width: 330px"
            placeholder="请输入服务商ID"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="relationShow = false">取消</el-button>
        <el-button type="primary" @click="FwSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { relate, getList, unRelate } from "@/api/enterprise/accountManag";
import userAvatar from "./conponments/accountManag/userAvatar.vue";
export default {
  components: { userAvatar },
  filters: {
    userType: function (val) {
      if (val == 2) {
        val = "公司";
      } else if (val == 3) {
        val = "服务商";
      } else if (val == 4) {
        val = "学校";
      } else {
        val = "个人";
      }
      return val;
    },
    phone: function (val) {
      val = "" + val;
      var tel = val.substr(0, 3) + "****" + val.substr(7);
      return tel;
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.psdForm.psdAgain !== "") {
          this.$refs.psdForm.validateField("psdAgain");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.psdForm.newPsd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      tableHight: window.innerHeight - 330,
      user: {},
      tabList: [
        {
          id: 1,
          label: "服务商",
        },
      ],
      nickNameShow: false,
      nickRules: {
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      },
      nickForm: {
        nickName: "",
      },
      psdForm: {
        newPsd: "",
        psdAgain: "",
      },
      psdRules: {
        newPsd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        psdAgain: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
      fwForm: {
        fwId: "",
      },
      userInfo: {},
      fwRules: {
        fwId: [
          {
            required: true,
            message: "请输入服务商ID",
            trigger: "blur",
          },
        ],
      },
      active1: 0,
      count: "",
      timer: null,
      codeShow: true,
      Chioose: true,
      Data: [],
      psdShow: false,
      relationShow: false, //关联服务商
      phoneShow: false, //修改手机号码
      phoneCode: "", //验证手机验证码
      code: "", //验证手机号验证号
      newPhone: "", //新手机号
      pageSize: 10,
      pageNum: 1,
      total: 0,
      psdCode: "", // 修改密码验证码
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 获取服务商列表
    getList() {
      getList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.Data = res.rows;
        this.total = res.total;
      });
    },
    // 关闭服务商绑定dialog
    relationClose() {
      this.fwForm.fwId = "";
    },
    // 服务商id绑定确定
    FwSubmit() {
      this.$refs.fwForm.validate((valid) => {
        if (!valid) return;
        relate({
          serviceProviderId: this.fwForm.fwId,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
          this.relationShow = false;
        });
      });
    },
    // 解绑
    Unlock(row) {
      this.$confirm("是否确认与该服务商解绑?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return unRelate({
            deptId: row.deptId,
          });
        })
        .then((res) => {
          this.getList();
          this.$message.success(res.msg);
        });
    },
    // 关联服务商
    relation() {
      this.relationShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.info-portrait {
  display: flex;
  align-items: center;
  width: 81px;
  height: 81px;
  border-radius: 81px;
  background-color: #fff;
  .userAcatar {
    width: 81px;
    height: 81px;
    border-radius: 81px;
  }
  .nickName {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.info {
  padding: 0 40px;
  margin-top: 24px;
  width: 100%;
  height: 138px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #e2e7f7 0%,
    #d6dfef 38%,
    #d0dbec 100%,
    #f5f8fa 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  display: flex;

  .info-detail {
    display: flex;
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;
      li {
        width: 400px;
        list-style: none;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-top: 15px;
      }
    }
  }
}

.unlock {
  color: #1267fa;
  cursor: pointer;
}
.modify {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
.phoneIn {
  margin: 10px 0 20px 30px;
}
.next {
  width: 330px;
  height: 50px;
  margin-left: 100px;
}
.chioose-header {
  width: 100%;
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #ececec;
}
.chioose-header-left {
  display: flex;
}
.tab-title {
  display: flex;
  margin-left: 44px;
  cursor: pointer;
}
.active1 {
  border-bottom: 2px solid #1267fa;
  color: #1267fa;
}
.fw-table {
  margin-top: 20px;
}
.specific {
  position: relative;
  padding: 0 40px;
  display: flex;
  width: 100%;
  height: 122px;
  line-height: 122px;
  border-bottom: 1px solid #dfe5ea;
  .specific-juti {
    margin-left: 100px;
    display: flex;
    line-height: 20px;
    align-items: center;
    .specific-juti-content {
      margin-left: 20px;
    }
  }
}
.changeEve {
  position: absolute;
  right: 20px;
  display: none;
}
.specific:hover .changeEve {
  display: block;
}
.nc {
  display: flex;
}
.el-pagination {
  margin-top: 80px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>